import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import './res/listData.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('你好flutter')),
        body: const MyApp(),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  List<Widget> _initData() {
    return listData.map((item) {
      return Container(
        decoration: BoxDecoration(
          color: Colors.teal[50],
        ),
        child: Column(
          children: [
            Image.network(item['imageUrl']),
            const SizedBox(height: 10),
            Text(
              item['title'],
              style: const TextStyle(fontSize: 18),
            )
          ],
        ),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO
    return GridView.count(
      crossAxisCount: 2, // 多少列
      crossAxisSpacing: 10, // 左右间距
      mainAxisSpacing: 10, // 上下间距
      childAspectRatio: 1, // 宽高比
      children: _initData(),
    );


    // TODO
    // return GridView.extent(
    //   maxCrossAxisExtent: 100, // 根据宽度数字计算多少列，自动排列
    //   crossAxisSpacing: 10, 
    //   mainAxisSpacing: 10, 
    //   childAspectRatio: 0.7,
    //   children: _initData(),
    // );
  }
}
